<!--------管理员修改班级信息界面---------->

<!DOCTYPE html>
<html lang="en">
<head xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8">
  <title>学生信息管理系统</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">

  <script src="/js/jquery-3.6.1.min.js"></script>
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">

</head>
<body>
<br/>
<div class="container-fluid">

  <br/>
  <form class="form-inline">

    <button type="button" class="btn btn-default btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">添加班级信息</button>

  </form>

  <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

</div>

<br/><br/>
<div>

  <table class="table table-bordered " id="Table">

  </table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">班级信息</h4>
      </div>
      <div class="modal-body">

        <form id="form">

          <input hidden="hidden" id="id" name="id"/>

          <div class="form-group">
            <label for="cno">班级代号</label>
            <input type="text" class="form-control" id="cno" name="cno" placeholder="班级代号">
          </div>

          <div class="form-group">
            <label for="cname">班级名称</label>
            <input type="text" class="form-control" id="cname" name="cname" placeholder="班级名称">
          </div>

          <div class="form-group">
            <label for="count">班级学生人数</label>
            <input type="text"  class="form-control" id="count" name="count" placeholder="班级人数">
          </div>

        </form>
        <!--表单结束-->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="save();">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--<script src="/js/jquery-3.6.1.min.js"></script>-->

<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>


<script type="text/javascript">


  function preAdd(){

    $("#id").val(0) ; //提示新增

  }


  //新增或者更新
  function save(){

    var data=$("#form").serialize();

    var id=$("#id").val();

    if(id<1){
      //新增
      $.ajax({

        url:"/webapi/banji/insert",
        method:"post",
        data:data

      }).done(function (){

        $('#Table').bootstrapTable("destroy");
        loadTable();
        $('#myModal').modal('hide')

      })
    }
    else{
      //更新
      $.ajax({

        url:"/webapi/banji/update",
        method:"put",
        data:data

      }).done(function (){

        $('#Table').bootstrapTable("destroy");
        loadTable();
        $('#myModal').modal('hide')

      })

    }
  }

  //更新
  function edit(id){

    $('#myModal').modal('show');

    $.ajax({
      url:'/webapi/banji/get/'+id

    }).done(function(rs){

      $("#id").val(rs.id);
      $("#cno").val(rs.cno);
      $("#cname").val(rs.cname);
      $("#count").val(rs.count);

    })

  }

  function loadTable(){

    $('#Table').bootstrapTable({
      url: '/webapi/banji/getbypage',

      striped:true,  //隔行变色效果
      pagination:true,  //底部会显示分页条
      singleSelect: false,  //true会禁止多选
      pageSize:5,   //每页数据条数
      pageNumber:1,   //首页页码
      sidePagination: "server",  //设置在哪分页

      queryParams:function(params) {

        var paraObj={

          size: params.limit,
          page: params.offset/params.limit,
          sort:"id",
          direct:"asc",
          name:$("#searchName").val()

        };

        return paraObj;
      },

      columns: [{
        field: 'id',
        title: '序号'
      }, {
        field: 'cno',
        title: '班级编号'
      }, {
        field: 'cname',
        title: '班级名称'
      }, {
        field: 'count',
        title: '班级学生人数'
      },
        {
          field: 'id',
          title: '&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;操作',
          formatter: function (value, row, meta) {

            var operator = "<a href='#' onclick='edit("+ value +")'>&emsp;&emsp;&emsp;&nbsp;修改班级信息</a> "
            return operator;

          }
        },]
    });

  } //end of loadTable()

  $(function (){

    loadTable();

  })

</script>
</body>
</html>